<template>
	<div class="web_list_box">
		<div class="item_header">
			<!-- <div class="item_favicon">
        <img :src="bookmark.favicon" alt="网站图标" />
      </div> -->
			<div class="item_text">
				<div class="item_title_url">
					<h3 class="item_title">{{ bookmark.title }}</h3>
					<div class="item_url">{{ bookmark.url }}</div>
				</div>
				<p class="item_description">{{ bookmark.description }}</p>
				<div class="item_meta">
					<div class="item_tags">
						<span
							v-for="(i, index) in tag"
							:key="index"
							class="item_tag"
							>{{ i }}</span
						>
					</div>
					<span class="item_date">{{ format_date(bookmark.added_date) }}</span>
				</div>
			</div>
			<div class="item_actions">
				<button
					class="action_btn"
					@click.stop="editBookmark(bookmark)">
					编辑
				</button>
				<button
					class="action_btn"
					@click.stop="deleteBookmark(bookmark.id)">
					删除
				</button>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { useIndexStore } from "@/store/model/index";

	const store = useIndexStore();
	const props = defineProps({
		bookmark: {
			type: Object,
			required: true,
		},
		tags: {
			type: Array,
			required: true,
		},
	});
	const emit = defineEmits(["editBookmark", "deleteBookmark"]);

	const tag = computed(() => {
		let list = [];
		props.tags.forEach(item => {
			props.bookmark.tags.forEach(tag => {
				if (item.id === tag) {
					list.push(item.name);
				}
			});
		});
		return list;
	});

	// 格式化日期函数，这里简单返回日期字符串，可按需修改
	const format_date = date => new Date(date).toLocaleDateString();

	const editBookmark = book => {
		emit("editBookmark", book);
	};

	const deleteBookmark = id => {
		emit("deleteBookmark", id);
	};
</script>

<style lang="less" scoped>
	.web_list_box {
		width: 1130px;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
		border: 1px solid #e5e7eb;
		padding: 16px;
		transition: all 0.2s ease;

		&:hover {
			box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
			transform: translateY(-4px);
		}

		.item_header {
			display: flex;
			align-items: flex-start;

			.checkbox_container {
				margin-right: 12px;

				input {
					width: 16px;
					height: 16px;
					border-radius: 4px;
					cursor: pointer;
				}
			}

			.item_favicon {
				width: 40px;
				height: 40px;
				background-color: #f3f4f6;
				border-radius: 4px;
				overflow: hidden;
				margin-right: 16px;
				flex-shrink: 0;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.item_text {
				flex: 1;
				min-width: 0;

				.item_title_url {
					margin-bottom: 4px;

					.item_title {
						font-weight: 500;
						color: #1f2937;
						margin: 0;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.item_url {
						font-size: 12px;
						color: #6b7280;

						&:hover {
							color: #1d4ed8;
						}
					}
				}

				.item_description {
					font-size: 14px;
					color: #4b5563;
					margin-bottom: 8px;
				}

				.item_meta {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					gap: 16px;

					.item_tags {
						display: flex;
						flex-wrap: wrap;
						gap: 4px;

						.item_tag {
							padding: 2px 8px;
							background-color: #f3f4f6;
							color: #4b5563;
							font-size: 12px;
							border-radius: 9999px;
						}
					}

					.item_date {
						font-size: 12px;
						color: #6b7280;
					}
				}
			}

			.item_actions {
				display: flex;
				align-items: center;
				gap: 4px;
				margin-left: 16px;

				.action_btn {
					font-size: 12px;
					color: #3b82f6;
					background-color: transparent;
					border: none;
					cursor: pointer;
					padding: 4px 8px;
					border-radius: 4px;

					&:hover {
						background-color: #eff6ff;
					}

					&:not(:last-child) {
						margin-right: 8px;
					}
				}
			}
		}
	}
</style>
